<!DOCTYPE html>
<html>
<head>
<title>Physics Diagram</title>
</head>
<body>
<canvas id="physicsCanvas" width="500" height="420"></canvas>
<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // Style settings
    ctx.lineWidth = 1.5;
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    const labelFont = "italic 22px Times New Roman";
    const chineseFont = "20px SimSun";
    const headlen = 8; // Arrow head length

    // Helper function to draw a double-headed arrow
    function drawDoubleArrow(ctx, x1, y1, x2, y2) {
        const angle1 = Math.atan2(y2 - y1, x2 - x1);
        const angle2 = Math.atan2(y1 - y2, x1 - x2);
        
        ctx.moveTo(x1, y1);
        ctx.lineTo(x2, y2);
        
        // Arrowhead at (x2, y2)
        ctx.moveTo(x2, y2);
        ctx.lineTo(x2 - headlen * Math.cos(angle1 - Math.PI / 6), y2 - headlen * Math.sin(angle1 - Math.PI / 6));
        ctx.moveTo(x2, y2);
        ctx.lineTo(x2 - headlen * Math.cos(angle1 + Math.PI / 6), y2 - headlen * Math.sin(angle1 + Math.PI / 6));
        
        // Arrowhead at (x1, y1)
        ctx.moveTo(x1, y1);
        ctx.lineTo(x1 - headlen * Math.cos(angle2 - Math.PI / 6), y1 - headlen * Math.sin(angle2 - Math.PI / 6));
        ctx.moveTo(x1, y1);
        ctx.lineTo(x1 - headlen * Math.cos(angle2 + Math.PI / 6), y1 - headlen * Math.sin(angle2 + Math.PI / 6));
    }

    // Helper function to draw a single-headed arrow
    function drawArrow(ctx, x1, y1, x2, y2) {
        const angle = Math.atan2(y2 - y1, x2 - x1);
        ctx.moveTo(x1, y1);
        ctx.lineTo(x2, y2);
        ctx.lineTo(x2 - headlen * Math.cos(angle - Math.PI / 6), y2 - headlen * Math.sin(angle - Math.PI / 6));
        ctx.moveTo(x2, y2);
        ctx.lineTo(x2 - headlen * Math.cos(angle + Math.PI / 6), y2 - headlen * Math.sin(angle + Math.PI / 6));
    }

    // --- Drawing starts here ---

    // 1. Coordinates and dimensions
    const sheetWidth = 120;
    const sheetLeftX = 100;
    const sheetRightX = sheetLeftX + sheetWidth;
    const distanceB = 150;
    const pointPX = sheetRightX + distanceB;
    const midY = 200;
    const sheetTopY = 50;
    const sheetBottomY = 350;

    // 2. Draw the copper sheet
    ctx.beginPath();
    // Jagged top
    ctx.moveTo(sheetLeftX, sheetTopY + 10);
    ctx.lineTo(sheetLeftX + 20, sheetTopY);
    ctx.lineTo(sheetLeftX + 50, sheetTopY + 15);
    ctx.lineTo(sheetLeftX + 90, sheetTopY - 5);
    ctx.lineTo(sheetRightX, sheetTopY + 10);
    // Right side
    ctx.lineTo(sheetRightX, sheetBottomY - 10);
    // Jagged bottom
    ctx.lineTo(sheetRightX - 30, sheetBottomY);
    ctx.lineTo(sheetRightX - 60, sheetBottomY - 15);
    ctx.lineTo(sheetRightX - 100, sheetBottomY + 5);
    ctx.lineTo(sheetLeftX, sheetBottomY - 10);
    // Left side
    ctx.closePath();
    ctx.stroke();

    // 3. Draw dimension 'a'
    ctx.beginPath();
    drawDoubleArrow(ctx, sheetLeftX, midY, sheetRightX, midY);
    ctx.stroke();
    
    ctx.font = labelFont;
    ctx.textAlign = "center";
    ctx.fillText("a", sheetLeftX + sheetWidth / 2, midY + 25);

    // 4. Draw current 'I'
    const currentArrowX = sheetLeftX + sheetWidth / 2;
    const currentArrowY_start = midY;
    const currentArrowY_end = midY - 50;
    
    ctx.beginPath();
    drawArrow(ctx, currentArrowX, currentArrowY_start, currentArrowX, currentArrowY_end);
    ctx.stroke();
    
    ctx.textAlign = "left";
    ctx.fillText("I", currentArrowX - 25, (currentArrowY_start + currentArrowY_end) / 2 + 10);

    // 5. Draw dimension 'b' and point 'P'
    ctx.beginPath();
    drawDoubleArrow(ctx, sheetRightX, midY, pointPX, midY);
    ctx.stroke();
    
    ctx.font = labelFont;
    ctx.textAlign = "center";
    ctx.fillText("b", sheetRightX + distanceB / 2, midY + 25);

    // Point P
    ctx.beginPath();
    ctx.arc(pointPX, midY, 4, 0, 2 * Math.PI);
    ctx.fill();
    
    ctx.textAlign = "left";
    ctx.fillText("P", pointPX + 10, midY + 8);

    // 6. Draw the caption
    ctx.font = chineseFont;
    ctx.textAlign = "center";
    ctx.fillText("题 3 图", canvas.width / 2, 390);

</script>
</body>
</html>